<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>双色球随机选号</title>
		<style>
			p {
				width: 100px;
				height: 100px;
				color: white;
				font: 60px/100px Arial;
				border-radius: 50px;
				text-align: center;
				float: left;
				margin-left: 10px;
			}
			.red {
				background-color: red;
			}
			.blue {
				background-color: blue;
			}
		</style>
	</head>
	<body>
		<!-- 浏览器中的JavaScript包含以下三样内容 -->
		<!-- ECMAScript - ES6 - 核心语法 -->
		<!-- BOM - 浏览器对象模型 - window -->
		<!-- DOM - 文档对象模型 - document -->
		<script>
			function outputBall(num, color='red') {
				document.write(`<p class="${color}">`)
				if (num < 10) {
					document.write('0')
				}
				document.write(num)
				document.write('</p>')
			}
			
			var selectedBalls = []
			while (selectedBalls.length < 6) {
				let num = parseInt(Math.random() * 33 + 1)
				if (selectedBalls.indexOf(num) == -1) {
					selectedBalls.push(num)
				}
			}
			// 给红色球排序 - 需要传入一个匿名函数给出比较元素的规则
			// ES6开始支持使用箭头函数(Lambda函数 - 匿名函数)
			selectedBalls.sort((x, y) => x - y)
			// 代码有很多种坏味道 重复是最坏的一种 - Martin Fowler
			selectedBalls.forEach(item => outputBall(item))
			let num = parseInt(Math.random() * 16 + 1)
			outputBall(num, 'blue')
		</script>
	</body>
</html>
